<template>
	<view class="container">
		<view class="area">
			<textarea v-model="beizhu" maxlength="100" placeholder="请输入猫粮,饮用水位置,钥匙交接方式等"></textarea>
			<view class="tip">{{beizhu.length}}/100</view>
		</view>
		<view class="history">
			<view class="title">
				<view>历史记录</view>
				<view @click="changeEdit()">
					<view v-if="!edit">
						<image style="width: 30rpx;height: 30rpx;margin-right: 5rpx;" src="../../static/feed/edit.png"></image>
						编辑
					</view>
					<view v-if="edit">
						完成
					</view>
				</view>
			</view>
			<view class="list">
				<view @click="chooseBeizhu(index)" class="list-item" v-for="(item,index) in list" :key="item.beizhu_id">
					{{item.content}}
				<view @click.stop="shanchu(index)" v-if="edit" style="position: absolute;top: -20rpx;right: -10rpx;"><uni-icons type="closeempty"></uni-icons></view>
				</view>
			</view>
		</view>
	</view>
	<view style="width: 100%;height: 120rpx;"></view>
	<view class="bottom">
		<view @click="wancheng()" class="button">完成</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive,onBeforeMount} from "vue"
	import http from "@/utils/request.js"
	onBeforeMount(()=>{
		getlist()
	})
	
	let beizhu=ref('')
	let edit=ref(false)
	let list=ref(null)
	
	function getlist(){
		let response =http.get('/beizhu/getbeizhu',{beizhu_order:uni.getStorageSync('userinfo').user_id})
		response.then(res=>{
			if(res.data.code===200){
				list.value=res.data.data
			}
		})
	}
	function changeEdit(){
		edit.value=!edit.value
	}
	function chooseBeizhu(index){
		beizhu.value=list.value[index].content
	}
	function shanchu(index){
		let response=http.post('/beizhu/deletebeizhu',{beizhu_id:list.value[index].beizhu_id})
		response.then(res=>{
			if(res.data.code===200){
				list.value.splice(index,1)
			}
		})
	}
	function addbeizhu(){
		let flag=false;
		list.value.forEach((item)=>{
			if(item.content==beizhu.value)flag=true
		})
		if(flag)return
		let response=http.post('/beizhu/addbeizhu',{content:beizhu.value,beizhu_order:uni.getStorageSync('userinfo').user_id})
		response.then(res=>{
			return
		})
	}
	function wancheng(){
		addbeizhu()
		uni.$emit('receivebeizhu',beizhu.value)
		uni.navigateBack()
	}
</script>

<style lang="scss">
	page{
		background-color: #ffffff;
	}
	.container{
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		box-sizing: border-box;
		padding: 40rpx;
		
		.area{
			width: 100%;
			position: relative;
			margin-bottom: 40rpx;
			
			textarea{
				letter-spacing: 0.1em;
				width: 100%;
				background-color: #f6f6f6;
				box-sizing: border-box;
				padding: 20rpx;
				border-radius: 20rpx;
			}
			
			.tip{
				position: absolute;
				bottom: 20rpx;
				right: 30rpx;
				color: #d8d8d8;
			}
		}
		
		.history{
			width: 100%;
			
			.title{
				width: 100%;
				margin-bottom: 20rpx;
				color: #949494;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			
			.list{
				display: flex;
				flex-wrap: wrap;
				
				&-item{
					position: relative;
					padding: 15rpx;
					border:2rpx solid #dedede;
					border-radius: 20rpx;
					margin:0 15rpx 15rpx 0;
					
					&:active{
						color:#949494
					}
				}
			}
		}
	}
	
	.bottom{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		box-shadow: 0 -12rpx 64rpx -14rpx rgba(0, 0, 0, 0.15);
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.button{
			background-color: #f8e177;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #090300;
			letter-spacing: 0.2em;
			width: 90%;
			height: 70%;
			border-radius: 50rpx;
			
			&:active{
				opacity: 0.7;
			}
		}
	}
</style>
